<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{$sheet.name}</title>
    <meta name="keywords" content="{$sheet.name} 多谱音乐 dscore.cn">
    <meta name="description" content="{$sheet.name} 多谱音乐 dscore.cn">
    <meta name="sogou_site_verification" content="zrLuQwEyk7"/>
    <meta name="copyright" content="©2017 dscore.cn 版权所有 粤ICP备17059884号-1" />
    <link rel="stylesheet" href="__STATIC__/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="__STATIC__/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="icon" href="__PUBLIC__/favicon.ico">
    <!--分享插件样式-->
    <link rel="stylesheet" href="__CSS__/share.css">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script>
    <![endif]--><!--[if gte IE 9]><!-->
    <!--百度站长统计-->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?ad169fcfabe73dd92c3ef6255804122a";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!--百度自动推送-->
    <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
</head>
<body>
    <div class="sheet-bg">
        <!--分享窗口-->
        <div class="share-dialog">
            <div class="share-close"></div>
            <div class="share-dialog-title">分享</div>
            <div class="share-dialog-cont">
                <div class="share-copy">
                    <div class="share-copy-l">分享链接：</div>
                    <div class="share-copy-c"><input id="copytext" type="text"></div>
                    <div id="btnCopy" class="share-copy-r"  data-clipboard-target="#copytext">复制链接</div>
                    <div class="clear"></div>
                </div>
                <div class="share-platform">
                    <div class="share-platform-l">社交平台：</div>
                    <div class="share-platform-r">
                        <div class="bdsharebuttonbox">
                            <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                            <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                            <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                        </div>
                        <div class="share-platform-text">
                            您可以直接复制短链，分享给朋友，也可直接点击社交平台图标，指定分享。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--分享窗口end-->
        <div class="container sheet-body ">
            <div class="brand clearfix">
                <div class="pull-left">
                    <!--logo-->
                    <a class="pull-left display-inlineblock" href="{:U('index/index')}"><img class="logo" src="__IMG__/logo.png" alt="多谱音乐"></a>
                    <!--搜索框-->
                    <!--<form class="search-box" method="get" action="{:U('search/index')}">
                        <img class="search-icon" src="__IMG__/search.png">
                        <input type="text" name="name" value="{$keywords}" placeholder="请输入搜索内容">
                    </form>-->
                </div>
                <!--menu-->
                <div class="pull-right">
                    <div class="margin-left-30 display-inlineblock color-red margin-top-20">
                        <div class="dropdown">
                            <empty name="loginUser">
                                <a href="{:U('login/index')}" target="_blank"><p class="color-red login font-size-16">登录</p></a>
                                <else/>
                                <div class="login-user color-black " data-toggle="dropdown" data-hover="dropdown">
                                    <img class="user-avatar" <empty name="loginUser.avatar_url">src="__IMG__/avatar.png"<else/>src="{$loginUser.avatar_url}"</empty>>
                                    <span class="user-nickname">{$loginUser.nickname}</span>
                                    <span class="glyphicon glyphicon-triangle-bottom"></span>
                                </div>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="{:U('user/index', 'id='.$loginUser['uid'])}">个人中心</a>
                                    </li>
                                    <li>
                                        <a href="{:U('login/loginOut')}">退出</a>
                                    </li>
                                </ul>
                            </empty>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--曲谱图片-->
        <div class="clearfix container sheet-body margin-top-30 padding-0">
            <h1 hidden>{$sheet.name}</h1>
            <ul class="sheet-contain padding-0">
                <volist name="sheet.image" id="img">
                    <li class="padding-0" hidden>
                        <div class="half">
                            <div class="left-img" id="left-img-{$key}" <notempty name="img['scale']">data-scale="{$img.scale}" </notempty> style="width: 100%; background: url('{$img.url}') no-repeat; background-position: 0 0; background-size: 100%"></div>
                            <div class="left-img-id" id="{$img.id}" hidden></div>
                        </div>
                        <div class="half">
                            <div class="right-img" id="right-img-{$key}" <notempty name="img['scale']">data-scale="{$img.scale}" </notempty> style="width: 100%; background: url('{$img.url}') no-repeat; background-position: 0 -599px; background-size: 100%"></div>
                        </div>
                    </li>
                </volist>
            </ul>
            <!--曲谱指标-->
            <ul class="sheet-indicators">
                <volist name="sheet.image" key="k" id="img">
                    <li class="">
                        <span class="indicator"></span>
                        <span class="indicator"></span>
                    </li>
                </volist>
            </ul>
        </div>
        <!--曲谱图片end-->
        <div class="container sheet-body sheet-operation">
            <div class="margin-top-60 margin-bottom-60 font-size-18  clearfix">
                <div class="half">
                    <div class="pull-left sheet-operation-btn" id="collect">
                        <span class="collect_icon_white"></span>
                        <span class="color-white" id="collect-btn" onclick="" data-status="{$sheet.collect_status}" data-id="{$sheet.id}">收藏</span>
                    </div>
                    <div class="pull-left sheet-operation-btn" id="like">
                        <span class="like_icon_white"></span>
                        <span class="color-white" id="like-btn" onclick="" data-status="{$sheet.fav_status}" data-id="{$sheet.id}">喜欢</span>
                    </div>
                    <!--<div class="pull-left score-operation-btn " id="comment">
                        <span class="comment_icon_white"></span>
                        <span class="color-white">评论</span>
                    </div>-->

                    <span class="prev-arrow"></span>
                </div>
                <div class="half">
                    <!--<div class="pull-right score-operation-btn" id="record">
                        <span class="record_icon_white"></span>
                        <span class="color-white">录音</span>
                    </div>-->

                    <div class="pull-right sheet-operation-btn" id="config">
                        <span class="config_icon_white"></span>
                        <span class="color-white">设置</span>
                        <div class="tips">点击可修改谱子大小</div>
                    </div>
                    <div class="pull-right sheet-operation-btn" id="share">
                        <span class="share_icon_white"></span>
                        <span class="color-white">分享</span>
                    </div>
                    <span class="next-arrow"></span>
                </div>
            </div>
        </div>
        <div class="container sheet-body page-config" hidden>
            <div class="margin-bottom-60 margin-top-30" >
                <div class="config-step" id="first-step">
                    <h3>第一步</h3>
                    <span>拖动左边曲谱窗口调整曲谱显示区域</span>
                </div>
                <div class="config-step" id="second-step">
                    <h3>第二步</h3>
                    <span>完成</span>
                </div>
                <div class="cancel-btn" id="cancel-btn">取消</div>
                <div class="next-btn" id="next-btn">下一张</div>
                <div class="complete-btn" id="complete-btn" hidden>完成</div>
                <input id="sheet_id" value="{$sheet.id}" hidden>
            </div>
        </div>
    </div>
    <volist name="sheet.image" id="img">
        <notempty name="img.scale">

        </notempty>
    </volist>

    <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="__STATIC__/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap-hover-dropdown.js"></script>
    <script type="text/javascript" src="__JS__/layer.js"></script>
    <script type="text/javascript" src="__JS__/common.js"></script>
    <script>
        /*曲谱默认显示效果*/
        $(".sheet-contain li").first().addClass('active');
        $(".sheet-indicators li").first().addClass('active');
        var scale = 0.7069;
        var totalHeight = $('.left-img').width() / scale;
        var h = totalHeight * 0.5;
        /* console.log($('.left-img').width());
         console.log(h);*/
        $('.left-img, .right-img').css("height" , h + "px");
        $('.right-img').css("background-position", 0 + " -" + h + "px");

        /*已修改配置后的显示效果*/
        $('.sheet-contain .left-img').each(function () {
            var id = $(this).attr('id');
            var scale = $(this).attr('data-scale');
            if (scale) {
                var h = $('.sheet-contain .left-img').width() / scale;
                $(this).css("height", h + "px");
            }
        });

        $('.sheet-contain .right-img').each(function () {
            var id = $(this).attr('id');
            var scale = $(this).attr('data-scale');
            if (scale) {
                var h = $('.sheet-contain .left-img').width() / scale;
                rh = totalHeight - h;
                $(this).css("height", rh + "px");
                $(this).css("background-position", 0 + " -" + h + "px")
            }
        });

        /*曲谱显示区域设置*/
        $(function() {
            //设置按钮
            $("#config").click(function() {
                $('.sheet-operation').hide();
                $('.page-config').show();
                //显示第一张曲谱
                $('.sheet-contain li').removeClass('active');
                $('.sheet-indicators li').removeClass('active');
                $(".sheet-contain li").first().addClass('active');
                $(".sheet-indicators li").first().addClass('active');
                //调用调整插件
                $( "#left-img-0" ).resizable({
                    minWidth: $('.right-img').width(),
                    maxWidth: $('.right-img').width(),
                    resize: function (event, ui) {
                        var lh = $('#left-img-0').height();
                        $('#right-img-0').css({"background-position": 0 + " -" + lh + "px", 'height': totalHeight - lh + "px"});
                    }

                });
            });
            //下一步按钮
            var data = new Array();
            $('#next-btn').click(function () {
                var w1 = $('.sheet-contain .active .left-img').width();
                var h1 = $('.sheet-contain .active .left-img').height();
                var arr = new Array(w1, h1);
                var img_id = $('.sheet-contain .active .left-img-id').attr('id');
                data[img_id] = arr;
                $('.sheet-contain .active').next().addClass('active');
                $('.sheet-contain .active').prev().removeClass('active');
                $('.sheet-indicators .active').next().addClass('active');
                $('.sheet-indicators .active').prev().removeClass('active');

                $('.sheet-contain .active .left-img').resizable({
                    minWidth: $('.sheet-contain .active .right-img').width(),
                    maxWidth: $('.sheet-contain .active .right-img').width(),
                    resize: function (event, ui) {
                        var lh = $('.sheet-contain .active .left-img').height();
                        $('.sheet-contain .active .right-img').css({"background-position": 0 + " -" + lh + "px", 'height': totalHeight - lh + "px"});
                    }
                });
                //最后一页切换为‘完成’按钮
                if ($('.sheet-contain li').last().hasClass('active')) {
                    $('#next-btn').hide();
                    $('#complete-btn').show();
                }
            });

            //完成按钮
            $('#complete-btn').click(function () {
                var w1 = $('.sheet-contain .active .left-img').width();
                var h1 = $('.sheet-contain .active .left-img').height();
                var arr = new Array(w1, h1);
                var img_id = $('.sheet-contain .active .left-img-id').attr('id');
                data[img_id] = arr;

                //将数组转为json对象
                var sheet_id = $('#sheet_id').val();
                /*console.log(sheet_id);*/
                var jsonData = "";
                jsonData = "\"sheet_id\":\"" + sheet_id + "\",";
                for (var item in data) {
                    jsonData += "\"" + item + "\"" + ":" + "[" + data[item] + "]" + ",";
                }
                jsonData =jsonData.substring(0, jsonData.length-1);
                jsonData = '{' + jsonData + '}';
                jsonData = JSON.parse(jsonData);
                /*console.log(jsonData);*/

                //post传值
                var url = "{:U('sheet/displayConfig')}";
                $.post(url, jsonData, function (result) {
                    if (result.code == 200) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 2000
                        }, function(){
                            window.location.href="{:U('sheet/index','id='.$sheet['id'])}"
                        });
                    } else if(result.code == 0) {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 2000
                        }, function () {
                            window.location.reload();
                        })
                    }
                })
            });

            //取消按钮
            $('#cancel-btn').click(function () {
                $('.sheet-operation').show();
                $('.page-config').hide();
                //还原初始状态
                $('.left-img, .right-img').css("height" , h + "px");
                $('.right-img').css("background-position", 0 + " -" + h + "px");

                //如果有设置比例，按比例恢复
                /*已修改配置后的显示效果*/
                $('.sheet-contain .left-img').each(function () {
                    var id = $(this).attr('id');
                    var scale = $(this).attr('data-scale');
                    if (scale) {
                        var h = $('.sheet-contain .active .left-img').width() / scale;
                        $(this).css("height", h + "px");
                    }
                });

                $('.sheet-contain .right-img').each(function () {
                    var id = $(this).attr('id');
                    var scale = $(this).attr('data-scale');
                    if (scale) {
                        var h = $('.sheet-contain .active .left-img').width() / scale;
                        rh = totalHeight - h;
                        $(this).css("height", rh + "px");
                        $(this).css("background-position", 0 + " -" + h + "px")
                    }
                });
                $('.left-img').resizable("destroy");

                //显示第一张曲谱
                $('.sheet-contain li').removeClass('active');
                $('.sheet-indicators li').removeClass('active');
                $(".sheet-contain li").first().addClass('active');
                $(".sheet-indicators li").first().addClass('active');
                $('#next-btn').show();
                $('#complete-btn').hide();
            });
        });

        /*判断用户是否喜欢曲谱*/
        status = $('#like-btn').attr('data-status');
        if (status == 1) {
            $('#like-btn').parent('.sheet-operation-btn').css({'background':"#D12318","border":"solid 1px #D12318"});
        }
        /*喜欢曲谱*/
        $('#like-btn').click(function () {
            var now_status = $(this).attr('data-status');
            var id = $(this).attr('data-id');
            var status = 1;
            var url = '/Home/sheet/favSheet';
            var _this = $(this);
            if (now_status == 1) {
                status = 0;
                var data = {"status":status,"sheet_id":id};
                $.post(url, data, function (result) {
                    if (result.code == 200) {
                        _this.attr('data-status', 0);
                        _this.parent('.sheet-operation-btn').removeAttr('style');
                        _this.find("span").show();
                    } else if (result.code == 10001) {
                        //登录窗口
                        layer.open({
                            type: 2,
                            title: '',
                            area: ['600px', '420px'],
                            content: '/Home/login/index'
                        });
                    }
                });
            } else {
                var data = {"status":status,"sheet_id":id};
                $.post(url, data, function (result) {
                    if (result.code == 200) {
                        _this.attr('data-status', 1);
                        _this.parent('.sheet-operation-btn').css({'background':"#D12318","border":"solid 1px #D12318"});
                        _this.find("span").hide();
                    } else if (result.code == 10001) {
                        //登录窗口
                        layer.open({
                            type: 2,
                            title: '',
                            area: ['600px', '420px'],
                            content: '/Home/login/index'
                        });
                    }
                });
            }
        });

        /*收藏曲谱*/
        $('#collect-btn').click(function () {
            //验证是否登录
            var url = '/Home/login/check';
            var sheet_id = $(this).attr('data-id');
            $.get(url, function (result) {
                console.log(result.code);
                if (result.code == 200) {
                    var score_url = '/Home/score/collectSheet/id/'+ sheet_id;
                    layer.open({
                        type: 2,
                        title: '收藏到谱单',
                        area: ['480px', '380px'],
                        content: score_url //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                } else if (result.code == 10001) {
                    //登录窗口
                    layer.open({
                        type: 2,
                        title: '',
                        area: ['600px', '420px'],
                        content: '/Home/login/index'
                    });
                }
            });
        });
        /*设置按钮提示*/
        setInterval(function () {
            $('.sheet-operation-btn .tips').hide()
        }, 2000);
        $('#config').hover(function () {
            $('.sheet-operation-btn .tips').show()
        }, function () {
            $('.sheet-operation-btn .tips').hide()
        })
        /*调节窗口 曲谱默认显示效果（会冲突，无法调整高度）*/
        /*$(window).resize(function() {
            var scale = 0.7069;
            var h = $('.left-img').width() / scale * 0.5;
            $('.left-img, .right-img').css("height" , h + "px");
            $('.right-img').css("background-position", 0 + " -" + h + "px");

        });*/
    </script>
    <!--360自动推送-->
    <script>(function(){
        var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?722ea21cb9d85279e95c0cecd68e8237":"https://jspassport.ssl.qhimg.com/11.0.1.js?722ea21cb9d85279e95c0cecd68e8237";
        document.write('<script src="' + src + '" id="sozz"><\/script>');
    })();
    </script>
    <!--分享插件-->
    <script type="text/javascript" src="__JS__/clipboard.js"></script>
    <script>
        var g_url = window.location.href;
        $('.share-copy-c input').val(g_url);
        var clip = new Clipboard('#btnCopy');
    </script>
    <script>window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "多谱音乐是一款专注于发现与分享乐谱和音乐的产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。",
            "bdMini": "1",
            "bdMiniList": ["bdxc", "tqf", "douban", "bdhome", "sqq", "thx", "ibaidu", "meilishuo", "mogujie", "diandian", "huaban", "duitang", "hx", "fx", "youdao", "sdo", "qingbiji", "people", "xinhua", "mail", "isohu", "yaolan", "wealink", "ty", "iguba", "fbook", "twi", "linkedin", "h163", "evernotecn", "copy", "print"],
            "bdPic": "",
            "bdStyle": "1",
            "bdSize": "32"
        }, "share": {}
    };
    with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
    </script>
    <script>
        /**
         * 分享按钮
         */
        $('.share-dialog').hide();
        $('#share').click(function () {
            $('.share-dialog').toggle();
        })
        $('.share-close').click(function () {
            $('.share-dialog').hide();
        })
    </script>
    <!--分享插件end-->
</body>
</html>
